<template>
   <div class="partner-area">
       <div class="partner-area-text">
           <p class="p1">战略合作伙伴</p>
           <p class="p2">STRATEGYC PARTERS</p>
       </div>
       <div class="partner-area-content">
           <!-- <div class="partner-area-item" v-for="item in iconUrl">
               <img v-bind:src="item" alt="">
           </div> -->
           <div class="partner-area-item">
               <img src="@/assets/image/index/partner1.png" alt="">
           </div>
           <div class="partner-area-item">
               <img src="@/assets/image/index/partner2.png" alt="">
           </div>
           <div class="partner-area-item">
               <img src="@/assets/image/index/partner3.png" alt="">
           </div>
            <div class="partner-area-item">
               <img src="@/assets/image/index/partner4.png" alt="">
           </div>
           <div class="partner-area-item">
               <img src="@/assets/image/index/partner5.png" alt="">
           </div>
       </div>
       <div class="arrow-dubble" @click="arrowClick">
           <img src="../../assets/image/index/arrow-dubble.png" alt="">
        </div>
        <div class="partner-area-content1" v-if="showMorePartners">
           <!-- <div class="partner-area-item" v-for="item in iconUrl">
               <img v-bind:src="item" alt="">
           </div> -->
           <div class="partner-area-item">
               <img src="@/assets/image/index/partner1.png" alt="">
           </div>
           <div class="partner-area-item">
               <img src="@/assets/image/index/partner2.png" alt="">
           </div>
           <div class="partner-area-item">
               <img src="@/assets/image/index/partner3.png" alt="">
           </div>
            <div class="partner-area-item">
               <img src="@/assets/image/index/partner4.png" alt="">
           </div>
           <div class="partner-area-item">
               <img src="@/assets/image/index/partner5.png" alt="">
           </div>
       </div>

       
      
   </div>
</template>

<script>
export default {
   name: 'parter',
   data() {
       return {
           iconUrl:['@/assets/image/index/partner1.png',
                    '@/assets/image/index/partner2.png',
                    '@/assets/image/index/partner3.png',
                    '@/assets/image/index/partner4.png',
                    '@/assets/image/index/partner5.png'],
            showMorePartners:false
       }
   },
   methods:{
       arrowClick(){
           this.showMorePartners = !this.showMorePartners;
           console.log('---');
           

       }
   },
  components: {}
}
</script>
<style scoped lang="less">
.partner-area{
    overflow: hidden;
    min-height: 6.5rem;
    position: relative;
    .partner-area-text{
        height: 0.73rem;
        margin-top: 1.58rem;
        text-align: center;
        .p1{
                font-size: 0.4rem;
                color: #333333;
        }
        .p2{
                    font-size: 0.24rem;
                    color: #777777;
                    transform: scale(5/6);
            }
        }  
        .partner-area-content {
            margin: 0 auto;
            margin-top: 0.6rem;
            width: 5.7rem;
            height: 2rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            .partner-area-item{
                // flex: 1;
                width: 1.9rem;
                height: 0.9rem;
                 display: flex;
                 justify-content: center;
                 align-items: center; 
                 align-content:space-between;
                // overflow: hidden;
                img{
                     max-width: 100%;
                     max-height: 100%;
                     display: block;
                }
            }

        }

}
.arrow-dubble{
    // width: 1rem;
    // height: 1rem;
    // overflow: hidden;
    position: absolute;
    top: 5.0rem;
    margin-top: 0.57rem;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.5rem;
    img{
        width: 0.48rem;
    height: 0.26rem;
    }
}
 .partner-area-content1 {
            margin: 0 auto;
            margin-top: 1.4rem;
            width: 5.7rem;
            height: 2rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            .partner-area-item{
                // flex: 1;
                width: 1.9rem;
                height: 0.9rem;
                 display: flex;
                 justify-content: center;
                 align-items: center; 
                 align-content:space-between;
                // overflow: hidden;
                img{
                     max-width: 100%;
                     max-height: 100%;
                     display: block;
                }
            }

        }

         
</style>
